<template>
  <div class="chart-demo-container">
    <h2 class="demo-title">图表组件演示</h2>
    
    <div class="chart-control">
      <label for="chart-type">图表类型:</label>
      <select id="chart-type" v-model="currentType">
        <option value="line">折线图</option>
        <option value="area">面积图</option>
        <option value="bar">柱状图</option>
        <option value="pie">饼图</option>
        <option value="donut">环形图</option>
        <option value="radar">雷达图</option>
        <option value="mixed">混合图表</option>
      </select>
    </div>
    
    <div class="chart-demos">
      <!-- 当前选中的图表类型 -->
      <div class="chart-demo-item">
        <h3>{{ getChartTitle(currentType) }}</h3>
        <BaseChart 
          :type="currentType"
          :title="getChartTitle(currentType)"
          :subtitle="'基于ApexCharts的' + getChartTitle(currentType) + '演示'"
          :series="getChartData(currentType).series"
          :categories="getChartData(currentType).categories"
          :xAxisTitle="getChartData(currentType).xTitle"
          :yAxisTitle="getChartData(currentType).yTitle"
          :showDataLabels="['pie', 'donut', 'radar'].includes(currentType)"
          :smooth="currentType === 'line'"
          :enableZoom="true"
          :enableExport="true"
          height="400px"
        />
      </div>
      
      <!-- 说明和特性 -->
      <div class="features-container">
        <h3>BaseChart组件特性</h3>
        <ul class="features-list">
          <li><strong>可配置图表类型</strong>: 支持线图、面积图、柱状图、饼图、环形图、雷达图等多种类型</li>
          <li><strong>丰富的配置选项</strong>: 包括标题、颜色、轴标签、图例位置等</li>
          <li><strong>交互选项</strong>: 支持工具提示、图例点击、数据点选择、缩放等交互</li>
          <li><strong>响应式设计</strong>: 自动适应容器大小变化</li>
          <li><strong>空数据状态</strong>: 优雅处理空数据情况</li>
          <li><strong>加载和错误状态</strong>: 显示加载中动画和错误提示</li>
          <li><strong>类型安全</strong>: 使用TypeScript类型系统确保数据格式正确</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import BaseChart from './BaseChart.vue';

// 当前选择的图表类型
const currentType = ref('line');

// 获取图表标题
const getChartTitle = (type: string): string => {
  const titles: Record<string, string> = {
    'line': '折线图',
    'area': '面积图',
    'bar': '柱状图',
    'pie': '饼图',
    'donut': '环形图',
    'radar': '雷达图',
    'mixed': '混合图表'
  };
  return titles[type] || '图表';
};

// 生成图表数据
const getChartData = (type: string) => {
  // 基本数据集
  const months = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];
  const categories = months.slice(0, 7);

  if (type === 'pie' || type === 'donut') {
    // 饼图和环形图数据
    return {
      series: [44, 55, 13, 33, 22],
      categories: ['团队A', '团队B', '团队C', '团队D', '团队E'],
      xTitle: '',
      yTitle: ''
    };
  } else if (type === 'radar') {
    // 雷达图数据
    return {
      series: [
        {
          name: '系列1',
          data: [80, 50, 30, 40, 100, 20],
        }
      ],
      categories: ['销售', '营销', '开发', '客服', '技术', '管理'],
      xTitle: '',
      yTitle: ''
    };
  } else if (type === 'mixed') {
    // 混合图表数据
    return {
      series: [
        {
          name: '销售额',
          type: 'column', // 柱状图
          data: [440, 505, 414, 671, 227, 413, 201]
        },
        {
          name: '利润',
          type: 'line', // 线图
          data: [230, 420, 350, 470, 180, 300, 180]
        }
      ],
      categories: categories,
      xTitle: '月份',
      yTitle: '金额 (万元)'
    };
  } else {
    // 线图、面积图和柱状图数据
    return {
      series: [
        {
          name: '系列1',
          data: [31, 40, 28, 51, 42, 109, 100]
        },
        {
          name: '系列2',
          data: [11, 32, 45, 32, 34, 52, 41]
        }
      ],
      categories: categories,
      xTitle: '月份',
      yTitle: '销售额 (万元)'
    };
  }
};
</script>

<style scoped>
.chart-demo-container {
  padding: 20px;
  background-color: #f9fafc;
  border-radius: 10px;
}

.demo-title {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 20px;
  color: #333;
  text-align: center;
}

.chart-control {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.chart-control label {
  font-weight: 500;
}

.chart-control select {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: white;
  font-size: 14px;
}

.chart-demos {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
}

@media (max-width: 992px) {
  .chart-demos {
    grid-template-columns: 1fr;
  }
}

.chart-demo-item {
  background-color: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.chart-demo-item h3 {
  font-size: 18px;
  margin-top: 0;
  margin-bottom: 20px;
  color: #333;
}

.features-container {
  background-color: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.features-container h3 {
  font-size: 18px;
  margin-top: 0;
  margin-bottom: 15px;
  color: #333;
}

.features-list {
  padding-left: 20px;
  margin: 0;
}

.features-list li {
  margin-bottom: 10px;
  color: #555;
  line-height: 1.5;
}

.features-list li strong {
  color: #333;
}
</style> 
 